import React from 'react';
import PropTypes from 'prop-types';
import { observer, inject } from 'mobx-react';
import HomeListItem from './home_list_item';
import TA from '../../../stores/technical_article'
import './index.scss';

@inject((stores) => {
  const store = {
    ta: stores.ta,
  }
  return store
})
@observer
class HomeLeft extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      arcList: [],
    }
  }
  componentDidMount() {
    this.getList();
  }
  componentWillUnmount() {
    this.props.ta.cancel()
  }
  // 请求得到文章列表
  getList() {
    // 请求参数
    const { count, cateId } = this.props
    const cId = Array.isArray(cateId) ? cateId.join(',') : cateId
    this.props.ta.getTa(cId, count)
    // 请求数据
  }
  asyncBootstrap() {
    return new Promise((resolve, reject) => {
      const { count, cateId } = this.props
      this.props.ta.getTa(cateId, count)
        .then(() => {
          resolve(true)
        })
        .catch(reject)
    })
  }
  render() {
    const arcList = this.props.ta.arcList.get(`list${this.props.cateId}1`) //eslint-disable-line
    return (
      <div className="home-left pull-left">
        {arcList && arcList.length ? arcList.map(item => (
          <HomeListItem data={item} key={item.id} />
        ))
          :
        <div className="loading">加载中...</div>
        }
      </div>
    )
  }
}
export default HomeLeft;
HomeLeft.propTypes = {
  count: PropTypes.number,
  cateId: PropTypes.oneOfType([PropTypes.number, PropTypes.array]),
  ta: PropTypes.instanceOf(TA),
}
